<!-- 用户基本信息 -->
<template>
	<view class="container" :style="[navbarStyle]">
		<image class="bg" src="/pagesC-my/static/images/my/page-bg.png" mode="aspectFill"></image>
		<view class="content" @click="handleNavToUserInfoPage()">
			<view class="avatar-box">
				<image v-if="token && userInfo && userInfo.path" class="avatar" :src="userInfo.path"
					mode="aspectFill">
				</image>
				<image v-else class="avatar" src="/pagesC-my/static/images/my/default-avatar.svg" mode="aspectFill">
				</image>
			</view>
			<view class="info-box">
				<view v-if="token" class="userinfo">
					<view class="name">
						{{userInfo.nickname}}
						<button class="set-btn iconfont">&#xe614;</button>
					</view>
					<view class="mobile border-1px">{{userInfo.mobile}}</view>
				</view>
				<template v-else>
					<view class="f-s32">点击登录获取更多功能</view>
					<button class="login-btn" @click.stop="handleLogin()">登录</button>
				</template>
			</view>
			<button v-if="token" class="role-btn iconfont" @click.stop="handleChangeRole()">
				&#xe613; 我是商家
			</button>
		</view>
	</view>
</template>

<script setup>
	import { storeToRefs } from 'pinia';
	import { useUserStore } from "@/store/user.js";

	const userStore = useUserStore();
	const { token, userInfo } = storeToRefs(userStore);

	// 导航栏高度
	const navbarStyle = function() {
		const globalData = getApp().globalData;
		return { 'padding-top': globalData.statusBarHeight + globalData.navBarHeight + 'px' };
	}();

	// 页面跳转到用户信息
	const handleNavToUserInfoPage = (url) => {
		if (!userStore.token) {
			handleLogin();
		} else {
			uni.navigateTo({
				url: '/pages/userinfo/index'
			});
		}
	}

	// 登录
	const handleLogin = () => {
		userStore.SET_SHOW_LOGIN_PANEL();
	}

	// 切换身份
	const handleChangeRole = () => {
		userStore.SET_TOGGLE_ROLE();
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		z-index: 1;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
		}
	}

	.content {
		position: relative;
		display: flex;
		align-items: flex-start;
		height: 206rpx;
		padding: 30rpx 44rpx 0 34rpx;
		box-sizing: border-box;

		.avatar-box {
			width: 122rpx;
			height: 122rpx;
			margin-right: 20rpx;
			background: #fff;
			border-radius: 50%;

			.avatar {
				width: inherit;
				height: inherit;
				border-radius: 50%;
			}
		}

		.info-box {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 122rpx;

			.userinfo {
				position: relative;

				.name {
					display: flex;
					align-items: center;
					font-weight: bold;
					font-size: 34rpx;
					color: #222222;
					line-height: 1.5;

					.set-btn {
						font-size: 30rpx;
						color: #222;
						background-color: transparent;
						margin-left: 20rpx;
					}
				}

				.mobile {
					width: 160rpx;
					height: 42rpx;
					font-size: 20rpx;
					text-align: center;
					line-height: 42rpx;
					color: #F44A43;
					background-color: #FFF2F2;
					// border: 1rpx solid #F44A43;
					border-radius: 24rpx;
					margin-top: 8rpx;

					&::after {
						border-color: #F44A43;
						border-radius: 100px;
					}
				}
			}

			.login-btn {
				display: block;
				width: 180rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				background: #F44A43;
				border-radius: 50rpx;
				font-size: 30rpx;
				color: #fff;
				margin-top: 20rpx;
			}
		}

		.role-btn {
			position: absolute;
			top: 54rpx;
			right: 0;
			width: 160rpx;
			height: 54rpx;
			font-weight: 500;
			font-size: 22rpx;
			color: #F44A43;
			text-align: center;
			line-height: 54rpx;
			background-color: #FFF2F2;
			border-radius: 30rpx 0 0 30rpx;

			&:active {
				background-color: #efe3e3;
			}
		}
	}
</style>